<template>
	<div class="bf-news">
        <h1>{{ $t('page.index.news.title') }}</h1>
        <div class="newsList">
            <div class="item" v-for="item,index in $t('page.index.news.nList')" :key="index">
                <div class="newsdate">
                    <h1>{{ item.month }}</h1>
                    <p>{{ item.date }}</p>
                </div>
                <div class="newscontent">
                    <p class="title">{{ item.title }}</p>
                    <p class="descript">{{item.desc }}</p>
                    <router-link :to="{path: '/index/newsDtail', query: { id: index+1 }}">{{ item.btxt }}>></router-link>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
export default {};
</script>
<style>
.bf-news {
  width: 1000px;
  margin: 57px auto 0;
}
.bf-news .newsList {
  margin-top: 30px;
}
.bf-news .item {
  display: flex;
  margin-bottom: 30px;
  cursor: pointer;
}
.bf-news .item .newsdate {
  width: 110px;
  height: 110px;
  margin-right: 30px;
  border-radius: 50%;
  padding-top: 23px;
  background: #4b96ff;
  color: #fff;
}
.bf-news .item .newsdate h1 {
  color: #fff;
  font-size: 26px;
}
.bf-news .item .newsdate p {
  margin-top: 5px;
  font-size: 18px;
}
.bf-news .item .newscontent {
  flex: 1;
  text-align: left;
}
.bf-news .item .newscontent p {
  text-align: left;
}
.bf-news .item .newscontent .title {
  font-size: 26px;
  font-weight: bold;
  color: #3b3b3b;
  font-weight: bold;
}
.bf-news .item .newscontent .descript {
  font-size: 16px;
  margin: 8px 0;
  color: #3b3b3b;
  line-height: 20px;
  word-break: break-all;
  text-overflow: ellipsis;
  display: -webkit-box; /** 对象作为伸缩盒子模型显示 **/
  -webkit-box-orient: vertical; /** 设置或检索伸缩盒对象的子元素的排列方式 **/
  -webkit-line-clamp: 2; /** 显示的行数 **/
  overflow: hidden; /** 隐藏超出的内容 **/
}
.bf-news .item .newscontent a {
  color: #aaa;
}
.bf-news .item .newscontent span {
  color: #b3b3b3;
  font-size: 12px;
}
</style>
